<template>
  <edit-dialog
    ref="dialog"
    :confirm-loading="isLoading"
    :title="`导入${title}`"
    btn-text="导入"
    width="700px"
    :btn-style="{
      marginLeft: '10px'
    }"
    :submit-loading="isLoading"
    :is-handle-button="false"
    @close="close"
  >
    <div type="card" class="upload-card">
      <div class="card-item flex">
        <!-- <div class="left">上传文件：</div> -->
        <div class="right flex">
          <el-upload
            action="/"
            :on-success="onSuccess"
            :http-request="httpRequest"
            :disabled="isLoading"
            accept=".xlsx,.xls"
            :show-file-list="false"
          >
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
          <div class="el-upload__tip">单次最多上传500条 <a href="javascript:;" @click="getUploadTemplate">下载模板</a></div>
        </div>
      </div>
      <div class="card-item flex">
        <!-- <div class="left">导入结果:</div> -->
        <div class="right">
          <el-table
            :data="filesList"
            :configs="[]"
            height="250"
          >
            <el-table-column prop="fileName" label="文件" width="180px" />
            <el-table-column prop="resulut" label="结果">
              <template slot-scope="{ row }">
                <p>
                  已上传{{ row.resulut.totalCount }}条，成功{{ row.resulut.successCount }}条
                  <span v-if="row.resulut.fails && row.resulut.fails.length">
                    ，第<span v-for="(item, index) in row.resulut.fails" :key="item.failSort">
                      {{ item.failSort }}
                      <span v-if="index + 1 < row.resulut.fails.length">,</span>
                    </span>
                    行上传失败
                  </span>
                </p>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="text-center mt-20">
        <el-button type="primary" @click="$refs.dialog.closeDialog()">关闭</el-button>
      </div>
    </div>
  </edit-dialog>
</template>

<script>
import LoadingMixin from 'modules/mixins/section-loading'
import FileLoadMixins from 'modules/mixins/file-loader'

export default {
  name: 'ImportFile',
  mixins: [LoadingMixin, FileLoadMixins],
  props: {
    title: {
      type: String,
      default: ''
    },
    uploadApi: {
      type: Function,
      required: true
    },
    downloadApi: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      filesList: []
    }
  },
  mounted() {
    console.log(this.uploadApi, this.downloadApi)
  },
  methods: {
    async getUploadTemplate() {
      const data = await this.downloadApi()
      if (data) {
        const filename = `${this.title}导入模板`
        this.blobFileLoad(data, filename)
      }
    },
    onSuccess(res, file) {
      if (res.success && res.data) {
        const cloumn = {
          fileName: file.name,
          resulut: res.data
        }
        this.filesList.push(cloumn)
      }
    },
    async httpRequest(data) {
      this.loading()
      const file = new FormData()
      file.append('file', data.file)
      try {
        const res = await this.uploadApi(file)
        if (res.success) {
          return res
        } else {
          this.handleError()
        }
      } finally {
        this.loaded()
      }
    },
    close() {
      this.filesList = []
    }
  }
}
</script>
<style lang="scss" scoped>
.card-item {
   border: 1px solid #e8e8e8;
   padding: 10px;
   .el-upload__tip {
     margin-left: 10px;
     a {
       color: #1890ff;
     }
   }
   .left {
     width: 100px;
   }
   .right {
     flex: 1;
   }
}
</style>
